<template>
  <div>
    <div class="nav">
      <Breadcrumb>
        <BreadcrumbItem>分析</BreadcrumbItem>
        <BreadcrumbItem>业务</BreadcrumbItem>
        <BreadcrumbItem>列表</BreadcrumbItem>
      </Breadcrumb>

      <div class="yab">
        <Tabs value="name1" :animated="false" style="padding: 10px">
          <TabPane label="群体" name="qt">
            <div class="info">
              <div class="box">
                <box title="处方量" num="1" />
              </div>
              <div class="box">
                <box title="调剂量" num="0" />
              </div>
              <div class="box">
                <box title="复核量" num="0" />
              </div>
              <div class="box">
                <box title="煎药量" num="0" />
              </div>
            </div>

            <div class="info">
              <div class="box">
                <box title="砂锅煎药量" num="0" />
              </div>
              <div class="box">
                <box title="制膏量" num="1" />
              </div>
              <div class="box">
                <box title="制剂量" num="0" />  
              </div>
              <div class="box">
                <box title="发药量" num="1" />
              </div>
            </div>
            
            <div class="info">
              <div class="box">
                <box title="处方类型统计" num="0" />
              </div>
              <div class="box">
                <refzxt title="处方量变化趋势" />
              </div>
              <div class="box">
                <refzxt title="处方类型变化趋势" />
              </div>
            </div>

            <div class="info">
              <div class="box">
                <refzzt title="处方来源科室" />
              </div>
              <div class="box">
                <refzzt title="处方来源药房" />
              </div>
            </div>

            <div class="info">
              <div class="box">
                <refzzt title="开方医生" />
              </div>
              <div class="box">
                <box title="处方药品云图" num="1" />
              </div>
             </div>

            <div class="info">
              <div class="box">
                <refzxt title="调剂量变化趋势" />
              </div>
              <div class="box">
                <vxetable title="调剂人排行" />
              </div>
            </div>

            <div class="info">
              <div class="box">
                <refzxt title="复核量变化趋势" />
              </div>
              <div class="box">
                <vxetable title="复核人排行" />
              </div>
            </div>

            <div class="info">
              <div class="box">
                <refzxt  title="煎药量变化趋势"/>
              </div>
              <div class="box">
                <vxetable title="复核人排行" />
              </div>
            </div>

            <div class="info">
              <div class="box">
                <refzxt  title="砂锅煎药量变化趋势"/>
              </div>
              <div class="box">
                <vxetable title="砂锅煎药人排行" />
              </div>
            </div>

            <div class="info">
              <div class="box">
                <refzxt  title="制膏量变化趋势"/>
              </div>
              <div class="box">
                <vxetable title="制膏人排行" />
              </div>
            </div>

            <div class="info">
              <div class="box">
                <refzxt  title="制剂量变化趋势"/>
              </div>
              <div class="box">
                <vxetable title="制剂人排行" />
              </div>
            </div>

            <div class="info">
              <div class="box">
                <refzxt  title="患者量变化趋势"/>
              </div>
              <div class="box">
                <vxetable title="发药人排行" />
              </div>
            </div>
          </TabPane>
          <template #extra>
            <DatePicker
              type="daterange"
              split-panels
              placeholder="自定义时间范围"
              style="width: 300px"
            ></DatePicker>
            <Button
              style="
                background-color: #f0f0f0;
                margin-left: 10px;
                font-size: 12px;
              "
              >今天</Button
            >
            <Button
              style="
                background-color: #f0f0f0;
                margin-left: 10px;
                font-size: 12px;
              "
              >昨天</Button
            >
            <Button
              style="
                background-color: #f0f0f0;
                margin-left: 10px;
                font-size: 12px;
              "
              >本周</Button
            >
            <Button
              style="
                background-color: #f0f0f0;
                margin-left: 10px;
                font-size: 12px;
              "
              >本月</Button
            >
            <Button
              style="
                background-color: #f0f0f0;
                margin-left: 10px;
                font-size: 12px;
              "
              >本年</Button
            >
            <Button
              style="
                background-color: #945635;
                margin-left: 10px;
                color: #ffffff;
                font-size: 12px;
              "
              >自定义时间</Button
            >
          </template>
        </Tabs>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import box from "../../../../components/box.vue";
import refzxt from "../../../../components/refzxt.vue";
import refzzt from "../../../../components/refzzt.vue";
import vxetable from "../../../../components/vxetable.vue";


</script>
  
  <style scoped>
.nav {
  height:calc(100vh - 50px);
  overflow-y:auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 10px;
  padding-top: 10px;
  padding-right: 10px;
}
.info {
  display: flex;
  
}

.box {
  height: 360px;
  background-color: #ffffff;
  flex: 1;
  margin-bottom: 20px;
  margin-right: 20px;
}

</style>